
export const init = function (box_name, store) {
  var scrollBoxHeight = 0;
  var scrollBoxWidth = 0;
  var innerBoxHeight = 0;
  var innerBoxWidth = 0;
  var innerVerTop = 0;
  var innerVerHeight = 0;
  var innerBoxTop = 0;
  var innerHorLeft = 0;
  var innerHorWidth = 0;
  var innerBoxLeft = 0;
  var timer = '';
  var hiddenVertical = false;
  var hiddenHorizontal = false;
  var showScroll = false;

  // 传入盒子的类名 (现在要传入超大盒子!)
  var parentDiv = document.getElementsByClassName(box_name)[0];

  //  中间大盒子(包含滚动条)
  var scrollBox = parentDiv.getElementsByClassName("scroll_box")[0];

  // 单指中间内容盒子
  var innerBox = (parentDiv.getElementsByClassName("inner_box")[0]);

  // 底部滚动条父盒子
  var horizontalBtn = parentDiv.getElementsByClassName("horizontal")[0];

  // 底部滚动条
  var innerhorSpan = parentDiv.getElementsByClassName("inner_hor")[0];

  // 垂直的..
  var innerverSpan = parentDiv.getElementsByClassName("inner_ver")[0];
  var verticalBtn = parentDiv.getElementsByClassName("vertical")[0];
  //底部总览图表
  var com2 = document.getElementsByClassName("com-2")[0];
  var contentbody= document.getElementsByClassName("content-body")[0];
  
  //控制颜色变化开关
  var colorFlag = true;



  // 初始化
  var initFun = function () {
    scrollBoxHeight = scrollBox.offsetHeight; //中间大盒子真实高度
    scrollBoxWidth = scrollBox.offsetWidth; //中间大盒子真实宽度
    innerBoxHeight = innerBox.offsetHeight; //中间盒子真实高度
    innerBoxWidth = innerBox.offsetWidth; //中间盒子真实宽度
    innerHorWidth = scrollBoxWidth * scrollBoxWidth / innerBoxWidth; //底部滚动条宽度
    innerVerHeight = scrollBoxHeight * scrollBoxHeight / innerBoxHeight; //垂直滚条高度
    // console.log("innerBoxWidth:" + innerBoxWidth)
    // console.log("scrollBoxWidth:" + scrollBoxWidth)
    // console.log("innerHorWidth:" + innerHorWidth)

    if (innerVerHeight >= scrollBoxHeight) {
      hiddenVertical = true;
    }

    // 如果滚动条宽度大于盒子宽度,则隐藏
    if ((innerHorWidth + 20) >= scrollBoxWidth) {
      hiddenHorizontal = true;
    }
    //默认隐藏
    verticalBtn.style.display = 'none';
    horizontalBtn.style.display = 'none';

    // 兼容处理
    if (document.addEventListener) {
      // 监听 鼠标 移入

      // scrollBox.addEventListener('mouseenter', function (e) {
      parentDiv.addEventListener('mouseenter', function (e) {
        if ((innerHorWidth + 20) >= scrollBoxWidth) {
          hiddenHorizontal = true;
        }

        if (hiddenVertical) {
          verticalBtn.style.display = 'none';
        } else {
          verticalBtn.style.display = 'block';
          setVertical();
          mouseEnter(e);
        }

        // 判断 隐藏底部滚动条 开关
        if (hiddenHorizontal) {
          horizontalBtn.style.display = 'none';
        } else {
          horizontalBtn.style.display = 'block';
          // 初始化宽度和位置
          setHorizontal();
        }

        // // 可视区域宽度,高度
        var winHeight = document.documentElement.clientHeight;
        var winWidth = document.documentElement.clientWidth;


        // 当页面高度过高(即有出现滚动条)
        if (getTop(horizontalBtn) > winHeight) {
          isShowhorizontal()

          // 监听window滚动
          window.addEventListener('scroll', function () {
            isShowhorizontal()
          }, false)
        }
        // 移入监听结束
      }, false);


      // 鼠标移除事件(让滚动条隐藏)
      parentDiv.addEventListener('mouseleave', function (e) {
        //170815 新增, 移出时要让它的position还原为默认的
        verticalBtn.style.position = '';
        horizontalBtn.style.position = '';

        verticalBtn.style.display = 'none';
        horizontalBtn.style.display = 'none';
      }, false);


      //底部滚动条的拖动
      innerhorSpan.addEventListener('mousedown', function (e) {
        // 传的是底部滚动条的dom
        mouseDown(e, 'inner_hor');
        e.target.style.background = "#787878";
        colorFlag = false;
      }, false);


      // 垂直的拖动
      innerverSpan.addEventListener('mousedown', function (e) {
        mouseDown(e, 'inner_ver');
      }, false);


      // 样式的改变
      innerhorSpan.addEventListener('mousemove', function (e) {
        if (colorFlag) {
          e.target.style.background = "#a8a8a8";
        }
      }, false);

      innerhorSpan.addEventListener('mouseleave', function (e) {
        if (colorFlag) {
          e.target.style.background = "#c1c1c1";
        }
      }, false);

      document.addEventListener('mouseup', function (e) {
        innerhorSpan.style.background = "#c1c1c1";
      }, false);

      //下面是兼容  
    } else {

      parentDiv.onmouseenter = function (e) {
        if (hiddenVertical) {
          verticalBtn.style.display = 'none';
        } else {
          verticalBtn.style.display = 'block';
          setVertical();
          mouseEnter(e);
        }
        if (hiddenHorizontal) {
          horizontalBtn.style.display = 'none';
        } else {
          horizontalBtn.style.display = 'block';
          setHorizontal();
        }
      };

      parentDiv.onmouseleave = function (e) {
        verticalBtn.style.display = 'none';
        horizontalBtn.style.display = 'none';
      };

      innerverSpan.onmousedown = function (e) {
        mouseDown(e, 'inner_ver')
      };

      innerhorSpan.onmousedown = function (e) {
        mouseDown(e, 'inner_hor')
      }
    }
  }

  initFun();


  // 获取距离顶部的距离
  var getTop = function (e) {
    var offset = e.offsetTop;
    if (e.offsetParent != null) offset += getTop(e.offsetParent);
    return offset;
  }
  // 获取距离左侧的距离
  var getLeft = function (e) {
    var offset = e.offsetLeft;
    if (e.offsetParent != null) offset += getLeft(e.offsetParent);
    return offset;
  }

  var setVertical = function () {
    verticalBtn.getElementsByTagName('span')[0].style.top = innerVerTop + 'px';
    verticalBtn.getElementsByTagName('span')[0].style.height = innerVerHeight + 'px';
  }

  // 初始化 底部滚动条宽度和位置, left默认为0
  var setHorizontal = function () {
    horizontalBtn.getElementsByTagName('span')[0].style.left = innerHorLeft + 'px';
    horizontalBtn.getElementsByTagName('span')[0].style.width = innerHorWidth + 'px';
  }


  var mouseEnter = function (e) {
    var scrollBox = document.getElementsByClassName("scroll_box")[0];
    if (document.addEventListener) {
      scrollBox.addEventListener('DOMMouseScroll', scrollFunc, false);
    }
    scrollBox.onmousewheel = scrollFunc;
  }

  var scrollFunc = function (e) {
    e.preventDefault && e.preventDefault();
    if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件             
      if (e.wheelDelta > 0) { //当滑轮向上滚动时
        mouseScroll('up');

      }
      if (e.wheelDelta < 0) { //当滑轮向下滚动时
        mouseScroll('down');

      }
    } else if (e.detail) { //Firefox滑轮事件
      if (e.detail > 0) {
        mouseScroll('down');

      }
      if (e.detail < 0) {
        mouseScroll('up');

      }
    }
  }

  var mouseScroll = function (type) {

    if (type == 'up') {
      innerVerTop -= 10;
      mouseScrollUp();
    }
    if (type == 'down') {
      innerVerTop += 10;
      mouseScrollDown();
    }
    clearTimeout(timer)
    timer = setTimeout(function () {
      var a = 10;
      for (var i = 0; i < 10; i++) {
        if (type == 'up') {
          innerVerTop -= a;
          mouseScrollUp();
        }
        if (type == 'down') {
          innerVerTop += a;
          mouseScrollDown();
        }
        a -= 1;
      }
    }, 30)
  }


  var mouseScrollUp = function () {
    innerBoxTop = -(innerVerTop / (scrollBoxHeight - innerVerHeight) * (innerBoxHeight - scrollBoxHeight))
    if (innerVerTop <= 0) {
      innerVerTop = 0;
      innerBoxTop = -(innerVerTop / (scrollBoxHeight - innerVerHeight) * (innerBoxHeight - scrollBoxHeight))
    }
    innerBox.style.top = innerBoxTop + 'px';
    setVertical();
    setHorizontal();
  }

  var mouseScrollDown = function () {
    innerBoxTop = -(innerVerTop / (scrollBoxHeight - innerVerHeight) * (innerBoxHeight - scrollBoxHeight))
    if (innerVerTop >= scrollBoxHeight - innerVerHeight) {
      innerVerTop = scrollBoxHeight - innerVerHeight;
      innerBoxTop = -(innerVerTop / (scrollBoxHeight - innerVerHeight) * (innerBoxHeight - scrollBoxHeight))
    }
    innerBox.style.top = innerBoxTop + 'px';
    setVertical();
    setHorizontal();
  }

  //鼠标按下事件 
  var mouseDown = function (e, type) {
    e.preventDefault && e.preventDefault();
    // 获取鼠标按下时的位置
    var startX = e.clientX;
    var startY = e.clientY;
    // console.log("鼠标按下时的位置="+startX)

    // 水平拖动
    if (type == 'inner_hor') {
      //当前滚动条位置
      var tempVal = innerHorLeft;
      // 鼠标拖动
      document.onmousemove = function (e) {
        // 获取鼠标拖动时的位置
        var endX = e.clientX;
        // console.log("鼠标拖动时的位置="+endX)

        // 如底部滚动条处于默认位置(0)
        if (tempVal == 0) {
          innerHorLeft = endX - startX;
          mouseHorizontalMove();
        } else {
          innerHorLeft = tempVal + endX - startX;
          mouseHorizontalMove();
        }
      }
    }

    // 垂直拖动
    if (type == 'inner_ver') {
      var tempVal = innerVerTop;
      document.onmousemove = function (e) {
        var endX = e.clientX;
        var endY = e.clientY;
        if (tempVal == 0) {
          innerVerTop = endY - startY;
          mouseVerticalMove();
        } else {
          innerVerTop = tempVal + endY - startY;
          mouseVerticalMove();
        }

      }
    }

    // 鼠标松开时,移除拖动事件
    document.onmouseup = function (e) {
      document.onmousemove = null;
      colorFlag = true;
    }
  }

  // 底部滚动条移动时
  var mouseHorizontalMove = function () {
    innerBoxLeft = -(innerHorLeft / (scrollBoxWidth - innerHorWidth) * (innerBoxWidth - scrollBoxWidth))
    if (innerHorLeft >= scrollBoxWidth - innerHorWidth) {
      innerHorLeft = scrollBoxWidth - innerHorWidth;
      innerBoxLeft = -(innerHorLeft / (scrollBoxWidth - innerHorWidth) * (innerBoxWidth - scrollBoxWidth))
    }
    if (innerHorLeft <= 0) {
      innerHorLeft = 0;
      innerBoxLeft = -(innerHorLeft / (scrollBoxWidth - innerHorWidth) * (innerBoxWidth - scrollBoxWidth))
    }

    // 中间内容盒子的发生移动
    innerBox.style.left = innerBoxLeft + 'px';

    // 让固定栏表头也能移动
    if (store) {
      store.commit("changeScrollLeft", innerBoxLeft);
    }

    //滚动条移动
    setHorizontal();
    setVertical();
  }

  // 垂直滚动条移动时
  var mouseVerticalMove = function () {
    innerBoxTop = -(innerVerTop / (scrollBoxHeight - innerVerHeight) * (innerBoxHeight - scrollBoxHeight))
    if (innerVerTop >= scrollBoxHeight - innerVerHeight) {
      innerVerTop = scrollBoxHeight - innerVerHeight;
      innerBoxTop = -(innerVerTop / (scrollBoxHeight - innerVerHeight) * (innerBoxHeight - scrollBoxHeight))
    }
    if (innerVerTop <= 0) {
      innerVerTop = 0;
      innerBoxTop = -(innerVerTop / (scrollBoxHeight - innerVerHeight) * (innerBoxHeight - scrollBoxHeight))
    }
    innerBox.style.top = innerBoxTop + 'px';
    setVertical();
    setHorizontal();
  }

  //  170815 新增,当有页面高度过高,出现滚动条时,移入就让底部滚动条显示,并判断是固定还是fixed
  // 判断是否显示底部滚动条
  var isShowhorizontal = function () {
    var winHeight = document.documentElement.clientHeight;
    var winWidth = document.documentElement.clientWidth;
    var scrollTop = 0;
    var scrollHeight = 0;
    console.log("hove",888)
    if (document.documentElement && document.documentElement.scrollTop) {
      scrollTop = document.documentElement.scrollTop;
      scrollHeight = document.documentElement.scrollHeight;
    } else if (document.body) {
      scrollTop = document.body.scrollTop;
      scrollHeight = document.documentElement.scrollHeight;
    }
    // 判断win的滚动条触底了,去掉底部滚动的fixed,否则让 底部滚动条 fixed
    if (scrollTop > scrollHeight - winHeight - 100) {
      horizontalBtn.style.position = '';
      horizontalBtn.style.width = '100%'
      horizontalBtn.style.left = 0;
      horizontalBtn.style.background = 'rgba(255,255,255,0.05)'
    } else {
      var comtop=com2.getBoundingClientRect().top
      var contenbottom=contentbody.getBoundingClientRect().top
      
      var t = document.documentElement.scrollTop || document.body.scrollTop;
      console.log("comtop",comtop)
      console.log("t",t)
      console.log("contenbottom",contenbottom)
      if(t>comtop){
        horizontalBtn.style.position = 'fixed'
        horizontalBtn.style.width = scrollBoxWidth + 'px'
        horizontalBtn.style.left = getLeft(scrollBox) + 'px'
        horizontalBtn.style.background = 'rgba(255,255,255,0.05)'
        horizontalBtn.style.top= contenbottom+80+ 'px'
        horizontalBtn.style.bottom= "ss"+ 'px'
        console.log("小于",999)
      }else{
        if(t>comtop-contenbottom){
          horizontalBtn.style.position = 'fixed'
          horizontalBtn.style.width = scrollBoxWidth + 'px'
          horizontalBtn.style.left = getLeft(scrollBox) + 'px'
          horizontalBtn.style.background = 'rgba(255,255,255,0.05)'
          horizontalBtn.style.top= 'initial';
       
          horizontalBtn.style.bottom=20+'px'
          console.log("dayu2",999)
        }else{
          horizontalBtn.style.position = 'fixed'
          horizontalBtn.style.width = scrollBoxWidth + 'px'
          horizontalBtn.style.left = getLeft(scrollBox) + 'px'
          horizontalBtn.style.background = 'rgba(255,255,255,0.05)'
          // horizontalBtn.style.top= initial;

          console.log("dayu1",999)
        }
       
        // horizontalBtn.style.bottom= + 'px'
        
        
      }
      // horizontalBtn.style.position = 'fixed'
      // horizontalBtn.style.width = scrollBoxWidth + 'px'
      // horizontalBtn.style.left = getLeft(scrollBox) + 'px'
      // horizontalBtn.style.background = 'rgba(255,255,255,0.05)'
    }
  }


  window.onresize = function () {
    scrollBoxHeight = 0;
    scrollBoxWidth = 0;
    innerBoxHeight = 0;
    innerBoxWidth = 0;
    innerVerTop = 0;
    innerVerHeight = 0;
    innerBoxTop = 0;
    innerHorLeft = 0;
    innerHorWidth = 0;
    innerBoxLeft = 0;
    timer = '';
    hiddenVertical = false;
    hiddenHorizontal = false;
    showScroll = false;
    initFun();
    verticalBtn.getElementsByTagName('span')[0].style.top = 0;
    horizontalBtn.getElementsByTagName('span')[0].style.left = 0;
    innerBox.style.top = 0;
    innerBox.style.left = 0;
  }
}
